<template>
  <view>
    <view class="tn-flex shadow tn-padding  tn-bg-white tn-text-bold tn-flex-direction-row">
      <view class="tn-flex selector" @click="showDatePick=true">
        {{ dateValStr }} <span class="tn-icon-down-triangle  dm-main-text-color"/>
      </view>
      <view class="tn-margin-left selector" @click="showFromTypePick=true">{{ currentCommissionTypeStr }} <span class="tn-icon-down-triangle dm-main-text-color"/></view>
    </view>
    <tn-picker mode="time" v-model="showDatePick" :params="dataPickParams" @confirm="choseDate"/>
    <tn-picker mode="selector" v-model="showFromTypePick" :defaultSelector="[0]" :range="commissionTypeSelector" rangeKey="name" @confirm="choseFromTypeSelector"/>


    <view class="tn-flex tn-flex-row-center tn-text-xl tn-text-bold tn-margin">累计收益（元）: {{ totalCommission }}</view>

    <view class="dm-box tn-flex-col-center" v-for="(item,index) in list">
      <view class="tn-flex tn-flex-row-between tn-text-sm tn-color-gray tn-margin-top-xs">
        <view >订单号：{{ item.out_trade_no }}</view>
        <view class="tn-color-black">来源：{{item.commission_type=='recharge'?(item.level?'一级分佣':'二级分佣金'):'广告分润'}}</view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-text-sm tn-color-gray tn-margin-top-xs tn-flex-col-center">
        <view class="tn-flex tn-flex-direction-row tn-flex-col-center">
          <view v-if="item.commission_type=='recharge'" class="tn-flex tn-flex-direction-row tn-flex-col-center">
            <view class="tn-margin-right-xs"><image :src="item.avatar?item.avatar:'http://static.playlet.5884.cn/playlet/img/my/avatar.png'" style="height: 40px;width: 40px"/></view>
            <view class="tn-flex tn-flex-direction-column">
              <view class="tn-color-black">昵称：{{ item.nickname||'游客' }}</view>
              <view>ID:{{ item.user_id.slice(-7) }}</view>
            </view>
          </view>
          <view class="tn-text-bold tn-color-black dm-margin-top-bottom" v-else-if="item.commission_type=='ad'">
            广告收益
          </view>
        </view>
        <view>
          {{item.subject}}
        </view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-text-sm  tn-color-gray tn-margin-top-xs">
        <view>时间：{{ item.create_time*1000 | formatDateTime }}</view>
        <view class="tn-text-md">收益(元):<text class="money">{{ item.money/100 }}</text></view>
      </view>
    </view>

    <banner-ad :config="adConfig.wx_banner_incomeDetail"/>
  </view>
</template>

<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import BannerAd from "@/components/banner-ad/banner-ad.vue";
import {commissionList} from "../../api/api";

export default {
  components: {BannerAd},
  mixins: [common_mixin],
  name: "earning_detail",
  data() {
    return {
      showFromTypePick: false,
      commissionTypeSelector:[
        {name:'全部',key:''},
        {name:'充值收益',key:'recharge'},
        {name:'广告分润',key:'ad'}
      ],
      currentCommissionTypeStr:'全部',
      currentCommissionType:'',

      showDatePick: false,
      dateVal: '',
      dateValStr: '',
      // 只显示年月日
      dataPickParams: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      },

      page:1,
      list:[],
      hasMore:true,

      totalCommission: 0
    }
  },
  onShow(){
    this.totalCommission = this.vuex_user.invite_commission | 0;

    let date = new Date();
    this.dateVal = date.getFullYear() + "-" + (date.getMonth() + 1)
    this.dateValStr = date.getFullYear() + "-" + (date.getMonth() + 1)

    this.reset();
    this.getList()
  },
  onReachBottom() {
    if (!this.hasMore) {
      return
    }
    this.getList()
  },
  methods:{
    reset() {
      this.page=1;
      this.hasMore = true;
      this.list=[];
    },
    async getList () {
      let resp = await this.$api.commissionList();
      this.hasMore = resp.current_page<resp.total;
      this.list = this.list.concat(resp.data)
      this.page++;
    },
    choseDate(date) {
      this.dateVal = date.year + "-" + date.month
      this.dateValStr = date.year + "-" + date.month
      this.reset();
      this.getList();
    },
    choseFromTypeSelector(index) {
      console.log(index)
      this.currentCommissionTypeStr =this.commissionTypeSelector[index].name
      this.currentCommissionType =this.commissionTypeSelector[index].key
      this.reset();
      this.getList();
    }
  }
}
</script>

<style scoped lang="scss">

  .selector {
    background-color: #F1F1F1;
    padding: 2px 10px;
  }
</style>
